{% extends "erp/base.html" %}

{% block title %}备货计算{% endblock %}

{% block scripts %}
<script>
    // 将SKU数据存储为JavaScript变量
    const skuChoices = {{ sku_choices_json|safe }};
</script>
<script src="/static/js/stock_calculation.js"></script>
<script>
    const productSkus = JSON.parse('{{ product_skus|safe }}');
</script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">备货计算</h2>

    <form id="stockCalculationForm" method="post">
        {% csrf_token %}
        <div class="table-responsive mb-3">
            <table class="table">
                <thead>
                    <tr>
                        <th>产品SKU</th>
                        <th>需求数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="calculationItems">
                    <tr class="calculation-row">
                        <td>
                            <select name="product_sku" class="form-control sku-select" required>
                                <option value="">选择产品SKU</option>
                                {% for sku in product_skus %}
                                <option value="{{ sku }}">{{ sku }}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <input type="number" name="required_quantity"
                                   class="form-control" min="1" value="1" required>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm remove-row">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mb-3">
            <button type="button" id="addRow" class="btn btn-secondary">
                <i class="bi bi-plus"></i> 新增产品
            </button>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-calculator"></i> 计算
            </button>
        </div>
    </form>

    <div id="calculationResult" class="mt-4" style="display: none;">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">计算结果</h5>
            </div>
            <div class="card-body">
                <h5>产品需求汇总</h5>
                <table class="table table-bordered" id="productSummary">
                    <thead>
                        <tr>
                            <th>产品SKU</th>
                            <th>需求数量</th>
                            <th>当前库存</th>
                            <th>需要生产</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <h5 class="mt-4">物料需求汇总</h5>
                <table class="table table-bordered" id="materialSummary">
                    <thead>
                        <tr>
                            <th>物料SKU</th>
                            <th>需求总量</th>
                            <th>当前库存</th>
                            <th>需要采购</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}